<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="count++">累加</button>
    <button @click="destroy">卸载</button>
    <hr>
    <Header :count="count"/>
  </div>
</template>

<script>
/* 
父子组件生命周期流程
  -初始化流程
    父组件的beforeCreate-->父组件的creted-->父组件的beforeMount-->子组件的beforeCreate-->子组件的creted-->子组件的beforeMount-->子组件的mounted-->父组件的mounted

  -更新流程
    -当子组件没有用到父组件数据的时候(不仅限props),父组件更新,子组件不会触发任何的更新
    -当子组件用到了父组件的数据时 父组件beforeUpdate-->子组件的beforeUpdate-->子组件的updated-->父组件的updated

  -卸载流程
    父组件的beforeDestroy-->子组件的beforeDestroy-->子组件的destroyed--父组件的destroyed
  
*/
import Header from '@/components/Header'
export default {
  name:'App',
  components:{
    Header
  },
  data(){
    return{
      count:1
    }
  },
  methods:{
    destroy(){
      this.$destroy()
    }
  },
  beforeCreate(){
    console.log('****beforeCreate***');
  },
  created(){
    console.log('****created****');
  },
  beforeMount(){
    console.log('****beforeMount****');
  },
  mounted() {
    console.log('****mounted****');
  },
  beforeUpdate(){
    console.log('****beforeUpdate****');
  },
  updated(){
    console.log('****updated****');
  },
  beforeDestroy() {
    console.log('****beforeDestroy****');
  },
  destroyed(){
    console.log('****destroyed****');
  }

}
</script>

<style>

</style>